<template>
  <div class="monitor-page">
    <!-- 系统状态总览 -->
    <el-row :gutter="20" class="status-row">
      <el-col :xs="12" :sm="6" v-for="status in systemStatus" :key="status.id">
        <el-card class="status-card" :class="'status-' + status.status">
          <div class="status-header">
            <el-icon :size="32" :class="'status-icon-' + status.status">
              <component :is="status.icon" />
            </el-icon>
            <div class="status-badge" :class="'badge-' + status.status">
              {{ getStatusText(status.status) }}
            </div>
          </div>
          <div class="status-title">{{ status.title }}</div>
          <div class="status-value">{{ status.value }}</div>
          <el-progress 
            :percentage="status.percentage" 
            :color="getStatusColor(status.status)"
            :show-text="false"
          />
        </el-card>
      </el-col>
    </el-row>

    <!-- 实时监控 -->
    <el-row :gutter="20">
      <el-col :xs="24" :lg="16">
        <el-card class="monitor-card">
          <template #header>
            <div class="card-header">
              <span>📈 系统性能监控</span>
              <el-radio-group v-model="monitorPeriod" size="small">
                <el-radio-button label="1h">1小时</el-radio-button>
                <el-radio-button label="6h">6小时</el-radio-button>
                <el-radio-button label="24h">24小时</el-radio-button>
                <el-radio-button label="7d">7天</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="monitor-chart" id="performanceChart">
            <div class="chart-placeholder">性能监控图表（需要ECharts）</div>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :lg="8">
        <el-card class="monitor-card">
          <template #header>
            <span>⚠️ 系统告警</span>
          </template>
          <div class="alert-list">
            <el-timeline>
              <el-timeline-item
                v-for="alert in alerts"
                :key="alert.id"
                :timestamp="alert.time"
                :type="alert.type"
              >
                <div class="alert-item">
                  <div class="alert-title">{{ alert.title }}</div>
                  <div class="alert-desc">{{ alert.desc }}</div>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细监控指标 -->
    <el-row :gutter="20" class="metrics-row">
      <el-col :xs="24" :sm="12" :lg="6" v-for="metric in metrics" :key="metric.id">
        <el-card class="metric-card">
          <div class="metric-header">
            <el-icon :size="24" :color="metric.color">
              <component :is="metric.icon" />
            </el-icon>
            <span class="metric-title">{{ metric.title }}</span>
          </div>
          <div class="metric-value">{{ metric.value }}</div>
          <div class="metric-chart" :id="'metric-' + metric.id">
            <el-progress 
              type="dashboard" 
              :percentage="metric.percentage"
              :color="metric.color"
            >
              <template #default="{ percentage }">
                <span class="percentage-value">{{ percentage }}%</span>
              </template>
            </el-progress>
          </div>
          <div class="metric-footer">
            <span>峰值: {{ metric.peak }}</span>
            <span>平均: {{ metric.avg }}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 接口调用统计 -->
    <el-row :gutter="20">
      <el-col :xs="24" :lg="12">
        <el-card class="monitor-card">
          <template #header>
            <span>🔌 API接口调用Top 10</span>
          </template>
          <el-table :data="apiStats" stripe max-height="400">
            <el-table-column type="index" label="排名" width="60" />
            <el-table-column prop="path" label="接口路径" show-overflow-tooltip />
            <el-table-column prop="calls" label="调用次数" width="100">
              <template #default="{ row }">
                <el-tag>{{ row.calls.toLocaleString() }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="avgTime" label="平均响应(ms)" width="120">
              <template #default="{ row }">
                <el-tag :type="getResponseTag(row.avgTime)">
                  {{ row.avgTime }}ms
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="errorRate" label="错误率" width="100">
              <template #default="{ row }">
                <span :style="{ color: row.errorRate > 5 ? '#f56c6c' : '#67c23a' }">
                  {{ row.errorRate }}%
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :xs="24" :lg="12">
        <el-card class="monitor-card">
          <template #header>
            <span>🌐 用户访问统计</span>
          </template>
          <div class="visit-stats">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="stat-item">
                  <div class="stat-label">在线用户</div>
                  <div class="stat-value online">{{ onlineUsers }}</div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="stat-item">
                  <div class="stat-label">今日访问</div>
                  <div class="stat-value visits">{{ todayVisits }}</div>
                </div>
              </el-col>
            </el-row>
            <div class="visit-chart" id="visitChart">
              <div class="chart-placeholder">访问趋势图表（需要ECharts）</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 数据库监控 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="monitor-card">
          <template #header>
            <div class="card-header">
              <span>💾 数据库监控</span>
              <el-button-group size="small">
                <el-button>查询</el-button>
                <el-button>连接池</el-button>
                <el-button>慢查询</el-button>
              </el-button-group>
            </div>
          </template>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="6">
              <div class="db-stat">
                <div class="db-label">查询总数</div>
                <div class="db-value">156,789</div>
                <div class="db-change">+12.3%</div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="6">
              <div class="db-stat">
                <div class="db-label">平均查询时间</div>
                <div class="db-value">45ms</div>
                <div class="db-change">-5.2%</div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="6">
              <div class="db-stat">
                <div class="db-label">活跃连接</div>
                <div class="db-value">23 / 100</div>
                <div class="db-change">正常</div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="6">
              <div class="db-stat">
                <div class="db-label">慢查询</div>
                <div class="db-value warning">12</div>
                <div class="db-change">需关注</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, markRaw } from 'vue'
import { 
  Monitor, Warning, Service, Connection,
  Setting, Odometer, FolderOpened, Connection as Network
} from '@element-plus/icons-vue'

const monitorPeriod = ref('1h')
const onlineUsers = ref(1256)
const todayVisits = ref(8934)

// 系统状态
const systemStatus = reactive([
  { 
    id: 1, 
    title: 'CPU使用率', 
    value: '45%', 
    percentage: 45, 
    status: 'normal',
    icon: markRaw(Setting)
  },
  { 
    id: 2, 
    title: '内存使用', 
    value: '6.8GB/16GB', 
    percentage: 68, 
    status: 'warning',
    icon: markRaw(Odometer)
  },
  { 
    id: 3, 
    title: '磁盘使用', 
    value: '245GB/500GB', 
    percentage: 49, 
    status: 'normal',
    icon: markRaw(FolderOpened)
  },
  { 
    id: 4, 
    title: '网络流量', 
    value: '156MB/s', 
    percentage: 78, 
    status: 'warning',
    icon: markRaw(Network)
  }
])

// 告警列表
const alerts = ref([
  { id: 1, time: '2分钟前', title: '内存使用率过高', desc: '当前使用率68%，超过警戒线', type: 'warning' },
  { id: 2, time: '10分钟前', title: '接口响应慢', desc: '/api/orders接口平均响应时间2.3s', type: 'danger' },
  { id: 3, time: '25分钟前', title: '数据库连接异常', desc: '数据库连接池连接数达到90%', type: 'warning' },
  { id: 4, time: '1小时前', title: 'CPU使用率升高', desc: 'CPU使用率达到85%', type: 'info' }
])

// 监控指标
const metrics = reactive([
  { 
    id: 1, 
    title: 'CPU使用率', 
    value: '45%', 
    percentage: 45, 
    peak: '85%', 
    avg: '42%',
    color: '#409eff',
    icon: markRaw(Setting)
  },
  { 
    id: 2, 
    title: '内存使用率', 
    value: '68%', 
    percentage: 68, 
    peak: '78%', 
    avg: '65%',
    color: '#e6a23c',
    icon: markRaw(Odometer)
  },
  { 
    id: 3, 
    title: '磁盘IO', 
    value: '23MB/s', 
    percentage: 46, 
    peak: '50MB/s', 
    avg: '28MB/s',
    color: '#67c23a',
    icon: markRaw(FolderOpened)
  },
  { 
    id: 4, 
    title: '网络带宽', 
    value: '156MB/s', 
    percentage: 78, 
    peak: '200MB/s', 
    avg: '145MB/s',
    color: '#f56c6c',
    icon: markRaw(Network)
  }
])

// API统计
const apiStats = ref([
  { path: '/api/products/list', calls: 45678, avgTime: 45, errorRate: 0.2 },
  { path: '/api/orders/create', calls: 23456, avgTime: 156, errorRate: 1.5 },
  { path: '/api/users/login', calls: 12345, avgTime: 89, errorRate: 0.8 },
  { path: '/api/inventory/query', calls: 9876, avgTime: 234, errorRate: 3.2 },
  { path: '/api/sales/report', calls: 8765, avgTime: 567, errorRate: 5.6 },
  { path: '/api/customers/list', calls: 7654, avgTime: 78, errorRate: 0.5 },
  { path: '/api/finance/summary', calls: 6543, avgTime: 345, errorRate: 2.1 },
  { path: '/api/warehouse/stock', calls: 5432, avgTime: 123, errorRate: 1.2 },
  { path: '/api/suppliers/list', calls: 4321, avgTime: 67, errorRate: 0.3 },
  { path: '/api/dashboard/data', calls: 3210, avgTime: 456, errorRate: 4.5 }
])

const getStatusText = (status) => {
  const map = {
    normal: '正常',
    warning: '警告',
    danger: '危险'
  }
  return map[status] || '未知'
}

const getStatusColor = (status) => {
  const map = {
    normal: '#67c23a',
    warning: '#e6a23c',
    danger: '#f56c6c'
  }
  return map[status] || '#909399'
}

const getResponseTag = (time) => {
  if (time < 100) return 'success'
  if (time < 300) return 'warning'
  return 'danger'
}

onMounted(() => {
  // 初始化图表
})
</script>

<style scoped>
.monitor-page {
  padding: 20px;
  background: #f0f2f5;
  min-height: 100vh;
}

.status-row {
  margin-bottom: 20px;
}

.status-card {
  border: none;
  border-radius: 8px;
  transition: transform 0.3s;
}

.status-card:hover {
  transform: translateY(-5px);
}

.status-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.status-icon-normal {
  color: #67c23a;
}

.status-icon-warning {
  color: #e6a23c;
}

.status-icon-danger {
  color: #f56c6c;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.badge-normal {
  background: #f0f9ff;
  color: #67c23a;
}

.badge-warning {
  background: #fdf6ec;
  color: #e6a23c;
}

.badge-danger {
  background: #fef0f0;
  color: #f56c6c;
}

.status-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.status-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 15px;
}

.monitor-card {
  margin-bottom: 20px;
  border: none;
  border-radius: 8px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.monitor-chart {
  height: 400px;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  border-radius: 4px;
  color: #909399;
}

.alert-list {
  max-height: 400px;
  overflow-y: auto;
}

.alert-item {
  padding: 5px 0;
}

.alert-title {
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.alert-desc {
  font-size: 13px;
  color: #606266;
}

.metrics-row {
  margin-bottom: 20px;
}

.metric-card {
  border: none;
  border-radius: 8px;
}

.metric-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.metric-title {
  font-size: 14px;
  color: #606266;
}

.metric-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 20px;
}

.metric-chart {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.percentage-value {
  font-size: 20px;
  font-weight: bold;
}

.metric-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
}

.visit-stats {
  padding: 20px;
}

.stat-item {
  text-align: center;
  padding: 20px;
  background: #fafafa;
  border-radius: 8px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
}

.stat-value.online {
  color: #67c23a;
}

.stat-value.visits {
  color: #409eff;
}

.visit-chart {
  height: 250px;
  margin-top: 20px;
}

.db-stat {
  text-align: center;
  padding: 20px;
  background: #fafafa;
  border-radius: 8px;
}

.db-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.db-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.db-value.warning {
  color: #e6a23c;
}

.db-change {
  font-size: 14px;
  color: #67c23a;
}
</style>

